<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<html>
<head>
<title>Manage Calendar</title>
<meta charset="utf-8">
<meta name="viewport">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.0.min.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">

<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/ace.min.css" />
<link href="css/trung-style.css" rel="stylesheet" media="screen">

<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- date picker -->
</head>
<s:set var="errorMessage" value="%{#request.errorMessage}"></s:set>
<s:set var="successfulMessage" value="%{#request.SUCCESSFUL_MESSAGE}"></s:set>
<s:set var="registryMessage" value="%{#request.REGISTRY_MESSAGE}"></s:set>
<body class="login-layout">
	<div class="main-container">
		<div class="main-content">		
			<div class="row">
				<div class="col-sm-10 col-sm-offset-1">
					<div class="login-container">

						<div class="position-relative">
							<div id="login-box" class="login-box visible widget-box no-border">
								<div class="">
									
									<div class="widget-main">
										<h4 class="header blue lighter bigger">
											<i class="icon-coffee blue"></i> Đăng nhập
										</h4>
										<s:if test="%{#errorMessage != null}">											
											<font color="red"><i class="icon-warning-sign"></i> ${errorMessage}</font>
										</s:if>
										<s:if test="%{#successfulMessage != null}">											
											<font color="GREEN"><i class="icon-ok"></i> ${successfulMessage}</font>
										</s:if>
										<div class="space-6"></div>

										<form action="Login.do" method="post" onsubmit="return isValidLoginForm(true);">
											<fieldset>
												<label class="block clearfix">
													<span class="block input-icon input-icon-right"> 
														<input type="text" class="form-control" name="username" onchange="isValidLoginForm(false)"
															placeholder="Email" id="loginAccount"/> <i class="icon-user"></i>
														<font color="red" id="loginAccountMessage" style="display:none">
															<i class="icon-warning-sign"></i>
															<span id="loginAccountMessageSpan">Không được để trống</span>
														</font>	
													</span>
												</label>

												<label class="block clearfix">
													<span class="block input-icon input-icon-right"> 
														<input type="password" class="form-control" name="password" onchange="isValidLoginForm(true)"
															placeholder="Mật khẩu" id="loginPass"/> <i class="icon-lock"></i>
														<font color="red" id="loginPassMessage" style="display:none">
															<i class="icon-warning-sign"></i>
															<span id="loginPassMessageSpan">Không được để trống</span>
														</font>	
													</span>
												</label>

												<div class="space"></div>

												<div class="clearfix">
													<label class="inline">
														<input type="checkbox" class="ace" />
														<span class="lbl"> Ghi nhớ</span>
													</label>

													<button type="submit" class="width-35 pull-right btn btn-sm btn-primary" 
														id="submitLogin" >
														<i class="icon-key"></i> Đăng nhập
													</button>
												</div>

												<div class="space-4"></div>
											</fieldset>
										</form>

										
									</div>
									<!-- /widget-main -->

									<div class="toolbar clearfix">
										<div>
											<a href="#" onclick="show_box('forgot-box'); return false;" class="forgot-password-link">
												<i class="icon-arrow-left"></i> Quên mật khẩu
											</a>
										</div>

										<div>
											<a href="#" onclick="show_box('signup-box'); return false;" class="user-signup-link">
												Đăng ký <i class="icon-arrow-right"></i>
											</a>
										</div>
									</div>
								</div>
								<!-- /widget-body -->
							</div>
							<!-- /login-box -->

							<div id="forgot-box" class="forgot-box widget-box no-border">
								<div class="widget-body">
									<div class="widget-main">
										<h4 class="header red lighter bigger">
											<i class="icon-key"></i> Lấy lại mật khẩu
										</h4>

										<div class="space-6"></div>
										<p>Nhập lại email đã đăng ký</p>

										<form>
											<fieldset>
												<label class="block clearfix">
													<span class="block input-icon input-icon-right"> <input type="email" class="form-control"
															placeholder="Email" /> <i class="icon-envelope"></i>
													</span>
												</label>

												<div class="clearfix">
													<button type="button" class="width-35 pull-right btn btn-sm btn-danger">
														<i class="icon-lightbulb"></i> Hoàn tất!
													</button>
												</div>
											</fieldset>
										</form>
									</div>
									<!-- /widget-main -->

									<div class="toolbar center">
										<a href="#" onclick="show_box('login-box'); return false;" class="back-to-login-link">
											Đăng nhập <i class="icon-arrow-right"></i>
										</a>
									</div>
								</div>
								<!-- /widget-body -->
							</div>
							<!-- /forgot-box -->

							<div id="signup-box" class="signup-box widget-box no-border">
								<div class="widget-body">
									<div class="widget-main">
										<h4 class="header green lighter bigger">
											<i class="icon-group green"></i> Đăng ký
										</h4>

										<div class="space-6"></div>
										<p>Xin nhập đầy đủ thông tin bên dưới:</p>

										<s:if test="%{#registryMessage != null}">											
											<font color="red"><i class="icon-warning-sign"></i> ${registryMessage}</font>
										</s:if>
										<form action="Register.do" method="post">
											<fieldset>
												<!--label class="block clearfix">
													<span class="block input-icon input-icon-right"> <input type="email" class="form-control"
															placeholder="Email" /> <i class="icon-envelope"></i>
													</span>
												</label>  -->

												<label class="block clearfix">
													<span class="block input-icon input-icon-right"> 
														<input type="text" class="form-control" placeholder="Email đăng nhập" 
															name="username" id="regUsername" onchange="isValidEmail()"/>
															<i class="icon-user"></i>	
														<font color="red" id="usernameMessage" style="display:none">
															<i class="icon-warning-sign"></i>
															<span id="usernameMessageSpan">Không được để trống</span>
														</font>														
													</span>
												</label>
												
												<label class="block clearfix">
													<span class="block input-icon input-icon-right"> 
														<input type="text" class="form-control" placeholder="Họ và Tên" 
															name="fullname" id="regFullname" onchange="isValidFullName()"/>
															<i class="icon-info-sign"></i>
														<font color="red" id="fullnameMessage" style="display:none">
															<i class="icon-warning-sign"></i>
															<span id="fullnameMessageSpan">Không được để trống</span>
														</font>
													</span>
												</label>

												<label class="block clearfix">
													<span class="block input-icon input-icon-right"> 
														<input type="password" name="password" class="form-control"	
															placeholder="Mật khẩu" id="regPass" onchange="validatePass(false)"/>
															<i class="icon-lock"></i>
														<font color="red" id="passMessage" style="display:none">
															<i class="icon-warning-sign"></i>
															<span id="passMessageSpan">Không được để trống</span>
														</font>
													</span>
												</label>

												<label class="block clearfix">
													<span class="block input-icon input-icon-right">														
														<input type="password" class="form-control"	placeholder="Điền lại mật khẩu" 
															id="regRePass" onchange="validatePass(true)"/> 
															<i class="icon-retweet"></i>
														<font color="red" id="repassMessage" style="display:none">
															<i class="icon-warning-sign"></i>
															<span id="repassMessageSpan">Không khớp với mật khẩu</span>
														</font>
													</span>
												</label>

												<label class="block">
													<input type="checkbox" class="ace" id="regAgree" onchange="isFullFieldedRegistration()"/>
													<span class="lbl"> Tôi đồng ý với <a href="#">Điều khoản sử dụng</a>
													</span>
												</label>

												<div class="space-24"></div>

												<div class="clearfix">
													<button type="reset" class="width-30 pull-left btn btn-sm" onclick="resetForm()">
														<i class="icon-refresh"></i> Xóa hết
													</button>

													<button type="submit" id="submitRegister" disabled="disabled"
														class="width-65 pull-right btn btn-sm btn-success">
														Đăng ký <i class="icon-arrow-right icon-on-right"></i>
													</button>
												</div>
											</fieldset>
										</form>
									</div>

									<div class="toolbar center">
										<a href="#" onclick="show_box('login-box'); return false;" class="back-to-login-link">
											<i class="icon-arrow-left"></i> Về trang Đăng nhập
										</a>
									</div>
								</div>
								<!-- /widget-body -->
							</div>
							<!-- /signup-box -->
						</div>
						<!-- /position-relative -->
					</div>
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
	</div>
	<!-- /.main-container -->

	<!-- basic scripts -->
	<script type="text/javascript">
	window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>" + "<"+"/script>");
	if ("ontouchend" in document)
	    document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<"+"/script>");
	
	
	function show_box(id) {
	    jQuery('.widget-box.visible').removeClass('visible');
	    jQuery('#' + id).addClass('visible');
	}
	
	//------------------- Login validation ------------//
	function isValidEmailFormat(email){
	    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		  
	    return regex.test(email);
	}
	
	var changePass = false;
	function isValidLoginForm(isPassChanged){
	    var result = false;
	    if (isPassChanged){
			changePass = true;
	    }
	    
	    var password = jQuery("#loginPass").val();
	    var passMessage = jQuery("#loginPassMessage");
	    var passMessageContent = jQuery("#loginPassMessageSpan");
	 	var username = jQuery("#loginAccount").val();
	 	var usernameMessage = jQuery("#loginAccountMessage");
	    var usernameMessageContent = jQuery("#loginAccountMessageSpan");
	 	
	    if(username.trim() == ''){
			usernameMessageContent.html(' Xin hãy nhập tên tài khoản!');
	 	 	usernameMessage.show();
	 	 	passMessage.hide();	
	    } else {
			if (!isValidEmailFormat(username)){
		 	 	usernameMessageContent.html(' Tên đăng nhập sai định dạng!');
		 	 	usernameMessage.show();
		 	 	passMessage.hide();	 	 	
		 	} else {
		 	   usernameMessage.hide();
		 	   if (changePass){
		 	      	if(password.trim() == ''){
			 	      	passMessageContent.html(" Xin hãy nhập mật khẩu!");
						passMessage.show();
				    } else {
						if (password.length < 6){				    
						    passMessageContent.html(" Mật khẩu phải nhiều hơn 5 ký tự!");
							passMessage.show();
					    } else if (password.length > 20){				    
						    passMessageContent.html(" Mật khẩu tối đa 20 ký tự!");
							passMessage.show();
					    } else {
							passMessage.hide();
		
					 	 	if (!usernameMessage.is(":visible") && !passMessage.is(":visible")){
					 	 		result = true;
					 	 	}						
					    }	
				    }			 	    
		 	   }	 	    	    
		 	}
	    }
	    
	 	return result;
	}
	
	//----------------------------- Regitration validation -----------//
	var changeRepass = false;
	function validatePass(isRepassChanged) {
	    
	    if (isRepassChanged){
			changeRepass = true;
	    }
	    
	 	var password = jQuery("#regPass");
	 	var repassword = jQuery("#regRePass");
	    var passMessage = jQuery("#passMessage");
	    var passMessageContent = jQuery("#passMessageSpan");
	    var repassMessage = jQuery("#repassMessage");
	    if (password.val() == ""){
			passMessageContent.html(" Không được để trống!");
			passMessage.show();
			repassMessage.hide();
			disableButton ("submitRegister");
			
	    } else if (password.val().trim() == ""){
			passMessageContent.html(" Phải có ít nhất 1 ký tự khác khoảng trắng!");
			passMessage.show();
			repassMessage.hide();
			disableButton ("submitRegister");
	    } else {
			if (password.val().length < 6){				    
			    passMessageContent.html(" Phải có nhiều hơn 5 ký tự!");
				passMessage.show();
				repassMessage.hide();
				disableButton ("submitRegister");
		    } else if (password.val().length > 20){				    
			    passMessageContent.html(" Cho phép tối đa 20 ký tự!");
				passMessage.show();
				repassMessage.hide();
				disableButton ("submitRegister");
		    } else {
				passMessage.hide();
				if (changeRepass){
				    if (repassword.val() != password.val()){				    
						repassMessage.show();
						disableButton ("submitRegister");
				    } else {
						repassMessage.hide();
						showButton ("submitRegister");
						isFullFieldedRegistration();
				    }
				}	
		    }
				
	    } 	    
	}
	
	function isValidFullName(){
	    var fullname = jQuery("#regFullname").val();
	    var message = jQuery("#fullnameMessage");
	    var content = jQuery("#fullnameMessageSpan");
	    
	    if(fullname == ""){
			content.html(" Không được để trống!");
			message.show();
			
			disableButton ("submitRegister");
	    } else if (fullname.trim() == ""){
			content.html(" Phải có ít nhất 1 ký tự khác khoảng trắng!");
			message.show();
			disableButton ("submitRegister");
	    }  else {
			if (fullname.length > 60){				    
			    content.html(" Phải ít hơn 60 ký tự!");
			    message.show();
				disableButton ("submitRegister");
		    } else {
				message.hide();
				showButton ("submitRegister");
				isFullFieldedRegistration();
		    }
				
	    } 
	    
	    return ;
	}
	
	function disableButton (id){
	    var button = $('#'+ id);
	    button.attr("disabled", "disabled");
	}
	
	function showButton (id){
	    var button = $('#'+ id);
	    button.removeAttr("disabled");	   
	}
	
	
	function isValidEmail(){
		  
	    var email = jQuery("#regUsername").val();
	    var message = jQuery("#usernameMessage");
	    var content = jQuery("#usernameMessageSpan");
	    
	    if(!email == ""){
			if (!isValidEmailFormat(email)){			
				content.html(" Định dạng email không hợp lệ!");
				message.show();				
				disableButton ("submitRegister");
		    } else if (email.trim() == ""){
				content.html(" Phải có ít nhất 1 ký tự khác khoảng trắng!");
				message.show();
				disableButton ("submitRegister");
		    } else  if (email.length > 45){				    
			    content.html(" Cho phép tối đa 45 ký tự!");
				message.show();
				disableButton ("submitRegister");
		    } else {
				message.hide();
				isFullFieldedRegistration();
		    }
	    } else {
			content.html(" Không được để trống!");
			message.show();			
			disableButton ("submitRegister");
	    }
	    
	    return ;
	}
	
	function isFullFieldedRegistration(){
	    var repass = jQuery("#regRePass");
	    var pass = jQuery("#regPass");
	    var username = jQuery("#regUsername");
	    var fullname = jQuery("#regFullname");
	    var regAgree = jQuery("#regAgree");
	    var usernameMessage = jQuery("#usernameMessage");
	    var rePassMessage = jQuery("#repassMessage");
	    var passMessage = jQuery("#passMessage");
	    var isFullFielded = true;
	    
	    if (username.val() != ''){
			if (fullname.val() != ''){
			    if (pass.val() != ''){
					if (repass.val() != ''){
					    if (regAgree.is(":checked")){
						 	if (!usernameMessage.is(":visible")){
						 	   	if (!passMessage.is(":visible")){
						 	   		if (!rePassMessage.is(":visible")){
									 
								    } else {
										isFullFielded = false;
								    }
							    } else {
									isFullFielded = false;
							    }
						    } else {
								isFullFielded = false;
						    }
					    } else {
							isFullFielded = false;
					    }
				    } else {
						isFullFielded = false;
				    }
			    } else {
					isFullFielded = false;
			    }
		    } else {
				isFullFielded = false;
		    }
	    } else {
			isFullFielded = false;
	    }
	    
	    if (isFullFielded) {
			showButton ("submitRegister");
	    } else {
			disableButton ("submitRegister");
	    }
	    return isFullFielded;
	}
	

	function resetForm() {
	    var repassMessage = jQuery("#repassMessage");
	    var passMessage = jQuery("#passMessage");
	    var usernameMessage = jQuery("#usernameMessage");
	    var fullnameMessage = jQuery("#fullnameMessage");	    
	 	
	    repassMessage.hide();
	    passMessage.hide();
	    usernameMessage.hide();
	    fullnameMessage.hide();	    
	   
	}
	
	
	
    </script>
    <s:set var="onScreen" value="%{#request.ON_SCREEN}"></s:set>
    <s:if test="%{#onScreen == 'ForgotPasswordPage'}">
    	<script>show_box('forgot-box');</script>
    </s:if>
    <s:elseif test="%{#onScreen == 'RegisterPage'}">
    	<script>show_box('signup-box');</script>	
    </s:elseif>
    <s:else></s:else>
</body>
</html>